<#include "common/baseMarco.ftl">
<@header title="发布需求">
<link rel="stylesheet" href="/css/common.css">
<link rel="stylesheet" href="/css/main.css">
<style>
    body {
        height: 100%;
    }
    .require {
        margin: 30px 20px 30px 20px;
        background: #f6f6f6;
        border: 1px solid #cccccc;
        border-radius: 5px;
        overflow: hidden;
    }
    .require-title {
        margin-top: 20px;
        margin-bottom: 25px;
        text-align: center;
        font-size: 18px;
        color: #666666;
        border-right-style: solid;
        border-right-width: 100px;
        border-right-color: #cccccc;
        border-left-style: solid;
        border-left-width: 100px;
        border-left-color: #cccccc;
        line-height: 1px;
        height: 1px;
    }
    .content-wrap{
        padding: 0px 10px;
    }
    .require-content {
        font-size: 12px;
        background: #f6f6f6;
        color: #999999;
    }
    .require-button {
        height: 38px;
        background:#f6f6f6;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-top: 30px;
        margin-left: 20px;
        margin-right: 20px;
        border: 1px solid #cccccc;
        border-radius: 5px;
    }
    .require-button .industry{
        padding-left: 10px;
        color: #666666;
        font-size: 15px;
    }
    .require-button .goIcon {
        height: 19px;
        width: 11px;
        background: url('/images/arrow-right.png');
        background-repeat: no-repeat;
        background-size: contain;
        padding-right: 10px;
    }
    .container .publish-btn{
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #2694e9;
        height: 49px;
        color: white;
        font-size: 18px;
        border-radius: 0px;
    }
    #category .all-category{
        height: 30px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #f6f6f6;
        border-collapse: collapse;
        background: #ffffff;
    }
    #category .all-category .backIcon{
        height: 12px;
        width: 7px;
        background: url('/images/arrow-left.png');
        background-repeat: no-repeat;
        background-size: cover;
        margin-left: 20px;
        margin-right: 4px;
    }
    #category .all-category .name{
        font-size: 12px;
        color: #00000;
    }
    #category .sy{
        width: 124px;
        margin: 0px;
        padding: 0px;
        list-style-type: none;
        user-select:none;
        touch-callout:none;
    }
    #category .sy li{
        width: 124px;
        height: 43px;
        display: flex;
        align-items: center;
        text-align: center;
        background: #efefef;
        margin: 0px;
        padding: 0px;
        padding-left: 33px;
        border-collapse: collapse;
        font-size: 12px;
        color: #000000;
        user-select:none;
        touch-callout:none;
    }
    #category .sy .current{
        background: #ffffff;
    }
    #category .by{
        background: #ffffff;
        user-select:none;
        touch-callout:none;
    }
    #category .by li{
        display: flex;
        align-items: center;
        border-top: 1px solid #eeeeee;
        background: #ffffff;
        height: 42px;
        border-collapse: collapse;
        font-size: 12px;
        color: #000000;
        padding-left: 25px;
        user-select:none;
        touch-callout:none;
    }
    #category .by li:first-child{
        border-top: none;
    }
    #category .by li:last-child{
        border-bottom: 1px solid #eeeeee;
    }
    #category .by .select-li,#category .sy .select-li{
        color: #2694e9;
    }
    .category-wrap{
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: row;
        overflow: auto;
    }
    .category-wrap .category-left{
        width: 124px;
        background: #ffffff;
        overflow-x: hidden;
        overflow-y:auto;
    }
    .category-wrap .category-right{
        flex: 1;
        background: #ffffff;
        overflow-x: hidden;
        overflow-y:auto;
    }
    .weui-btn_primary:not(.weui-btn_disabled):active{
        background-color: #2694e9;
    }
    .weui-btn:after{
        border: none;
    }
    .public-btn {
        height: 49px;
        justify-content: center;
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 0px;
        background-color: #2694e9;
        color: #fff;
        border-radius: 0px;
    }
</style>
</@header>
<div class="container">
    <div class="require">
        <div class="require-title">需求描述</div>
        <div class="content-wrap">
        <textarea class="weui-textarea require-content"
                  rows="14"
                  maxlength="3000"
                  placeholder="请详细描述你对专家的要求，例如：&#13;&#10;我们是一家私募机构，准备投资国内新能源汽车产业，但是随着新一届政府上台，很多政策面临不确定性，希望专家能够来自研究机构、智库、行业协会等，和政府管理良好，能掌握最新的一手信息。"
        ></textarea>
        </div>
    </div>
    <div class="require-button" id="btn">
        <span class="industry">行业选择</span>
        <span class="goIcon">&nbsp;</span>
    </div>
    <a href="javascript:void(0);" class="weui-btn weui-btn_primary publish-btn">发布</a>
</div>
<#include "category.ftl"/>
<@footer>
<script src="/js/common.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function(){

        var industryId = null;
        var industryName = null;

        $(".sy li").click(function () {
            var that = $(this);
            var id = that.attr("data-id");
            var parentName = "#parent_"+id;
            var childName = "#child_"+id;
            $(".sy li").removeClass();
            $(".by").css('display','none');
            $(parentName).addClass("current");
            $(childName).css('display','block');
            var flag = "其他";
            if(that.html() == flag){
                industryId = id;
                industryName = flag;
                that.addClass("select-li");
            }else{
                industryId = null;
                industryName = null;
                $(childName).find("li").removeClass();
            }
        });

        $(".backIcon").on('click',function () {
            $("#category").attr("style","");
            $.closePopup();
            document.title = "发布需求";
        });

        $("#btn").on("click", function () {
            $("#category").popup();
            document.title = "行业选择";
        });

        $(".by li").click(function (e) {
            $(".by li").removeClass("select-li");
            var li = $(this);
            li.addClass("select-li");
            var dataId = li.attr("data-id");
            industryId = dataId;
            var childName = li.html();
            var fatherName = $(".current").html();
            industryName = fatherName +"-"+ childName;
        });
        $(".public-btn").on("click", function () {
            if(null == industryId){
                $.toptip('请选择一个行业',1500,'warning');
                return;
            }
            $("#category").attr("style","");
            $(".require-button .industry").html(industryName);
            document.title = "发布需求";
        });
        $(".publish-btn").on('click',function () {
            var ctx = $(".require-content").val();
            ctx = $.trim(ctx);
            if(ctx.length == 0){
                $.toptip('请输入需求描述',1500,'warning');
                return;
            }
            if(null == industryId){
                $.toptip('请选择一个行业',1500,'warning');
                return;
            }
            var params = {
                'content':ctx,
                'industryId':industryId
            }
            publish(params);
        });
        function publish(params) {
            $.post('/require/new',params,function(res){
               if(res && res['code'] == 200){
                   var data = res['data'];
                   if(data && data['id']){
                       window.location.href = "/publish?requireId="+data['id'];
                   }
               }
            });
        }
    });
</script>
</@footer>
